<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东会员登录</title>
    <script src="http://at.alicdn.com/t/c/font_4000250_v1sbgif9vvr.js"></script>
    <script src="./lib/axios.js"></script>
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <!-- 第一部分 header -->
    <div class="header">
        <div class="headerC">
            <div>
                <img src="./images/login01.png" alt="">
                <p>欢迎登录</p>
            </div>
            <div>
                <p>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinxi"></use>
                    </svg>
                </p>
                <p class="logo">登录界面，调查问卷</p>
            </div>
        </div>
    </div>

    <!-- 第二部分 banner -->
    <div class="banner">
        <div class="bannerC">
            <img src="./images/login02.png" alt="">
            <div class="login">
                <div class="one">
                    <p>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-alarm-fill"></use>
                        </svg>
                    </p>
                    <p>
                        京东不会以任何理由要求您转账汇款，谨防诈骗。
                    </p>
                </div>
                <div class="two">
                    <ul>
                        <li class="active">扫码登录</li>
                        <li>账户登录</li>
                    </ul>
                </div>
                <div class="three">
                    <!--  <div class="boxLogin">
                        <div class="badge bg-primary text-wrap" style="width: auto;">
                            Tips:
                        </div>
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                            <label for="floatingInput">Username</label>
                        </div>
                        <div class="form-floating">
                            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                            <label for="floatingPassword">Password</label>
                        </div>
                        <div>
                            <p><span>忘记密码</span></p>
                        </div>
                        <div class="btn">
                            <button type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div> -->
                    <img src="./images/login03.png" alt="">
                    <img src="./images/login04.png" alt="">
                    <p>打开<span>手机京东</span>扫描二维码</p>
                    <div class="threeDiv">
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lvse_jilu"></use>
                            </svg>
                            <span>免输入</span>
                        </p>
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shandian"></use>
                            </svg>
                            <span>更快</span>
                        </p>
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xianxinganquandunpai"></use>
                            </svg>
                            <span>更安全</span>
                        </p>
                    </div>
                </div> <!-- three -->
                <div class="four">
                    <div class="fourLeft">
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-QQ"></use>
                            </svg>
                            <span>QQ</span>
                        </p>
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-web_weixin"></use>
                            </svg>
                            <span>微信</span>
                        </p>
                    </div>
                    <div class="fourRight">
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youjiantou"></use>
                            </svg>
                            <span class="register">立即注册</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 第三部分 footer -->
    <div class="footer">
        <div class="footerC">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">广告服务</a></li>
                <li><a href="#">手机京东</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">销售联盟</a></li>
                <li><a href="#">京东社区</a></li>
                <li><a href="#">京东公益</a></li>
            </ul>
            <p>
                Copyright&copy;2004-
                <script>document.write(new Date().getFullYear())</script>
                京东JD.com 版权所有
            </p>
        </div>
    </div>

    <script>

        /* 问卷 */
        let logo = document.querySelector('.logo');
        logo.onmouseenter = function () {
            logo.style.color = 'red';
            logo.style.textDecoration = 'underline';
        }
        logo.onmouseleave = function () {
            logo.style.color = '';
            logo.style.textDecoration = '';
        }

        /* 注册 */
        let register = document.querySelector('.register');
        register.onmouseenter = () => {
            register.style.textDecoration = 'underline';
            register.style.cursor = 'pointer';
        }
        register.onmouseleave = () => {
            register.style.textDecoration = 'none';
        }
        register.onclick = () => {
            location.href = '01-register.html';
        }

        /* 登录 */
        let threeDiv = document.querySelector('.three');
        let twoDiv = document.querySelector('.two');
        let liItems = document.querySelectorAll('.two>ul>li');
        let html = threeDiv.innerHTML;
        liItems[0].onclick = () => {
            liItems[0].className = 'active';
            liItems[1].className = '';
            threeDiv.innerHTML = html;
        }
        liItems[1].onclick = () => {
            liItems[0].className = '';
            liItems[1].className = 'active';
            threeDiv.innerHTML = `<div class="boxLogin">
                        <div class="badge bg-primary text-wrap" style="width: auto;">
                            Tips : 若登录成功 , 则3秒后自动跳转到京东主页~.~
                        </div>
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                            <label for="floatingInput">Username</label>
                        </div>
                        <div class="form-floating">
                            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                            <label for="floatingPassword">Password</label>
                        </div>
                        <div>
                            <p><span>忘记密码</span></p>
                        </div>
                        <div class="btn">
                            <button type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>`;

            let tips = document.querySelector('.badge');
            let inputs = document.querySelectorAll('.form-control');
            let btn = document.querySelector('.btn');

            btn.onclick = () => {
                let data = {
                    username: inputs[0].value.trim(),
                    password: inputs[1].value.trim(),
                };
                axios({
                    method: 'post',
                    url: 'http://localhost:8888/users/login',
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    data,
                }).then(res => {
                    res = res.data;
                    console.log(res);
                    if (res.code == 1) {
                        let count = 4;
                        let timer = setInterval(() => {
                            tips.innerHTML = `Tips : 注册成功,${--count}秒钟后自动跳转京东主页 ~.~`;
                            if (count === 0) {
                                location.href = 'index.html';
                                clearInterval(timer);
                            }
                        }, 1000);
                        localStorage.setItem('token', res.token);
                        localStorage.setItem('uid', res.user.id);
                        localStorage.setItem('nickname', res.user.nickname);
                        localStorage.setItem('identity', res.user.identity);
                        localStorage.setItem('flag', 1);
                    } else {
                        tips.innerHTML = `Tips : ${res.message.split(',')[0]}`
                    }
                }) // axios
            } // btn.onclick

        }


    </script>
</body>

</html>